<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<table border="1">
    <caption>学生信息表</caption>
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="3" align="center">这里是表尾</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>001</td>
        <td>王明明</td>
        <td>男</td>
    </tr>
    <tr>
        <td>002</td>
        <td>李梅</td>
        <td>女</td>
    </tr>
    <tr>
        <td>003</td>
        <td>张晓莉</td>
        <td>女</td>
    </tr>
    </tbody>
</table>

<p>如果表格中只有一个&lt;tbody&gt;，则可以省略对表格结构的划分，显示效果完全一致。例如</p>

<table border="1">
    <caption>学生信息表</caption>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>001</td>
        <td>王明明</td>
        <td>男</td>
    </tr>
    <tr>
        <td>002</td>
        <td>李梅</td>
        <td>女</td>
    </tr>
    <tr>
        <td>003</td>
        <td>张晓莉</td>
        <td>女</td>
    </tr>
    <tr>
        <td colspan="3" align="center">这里是表尾</td>
    </tr>
</table>

<p>
    对于不规则的单元格来说，有的单元格需要跨越多行或跨越多列，&lt;td&gt;以及&lt;th&gt;标签具有colspan和rowspan两个属性。
    colspan指当前单元格水平方向跨越的单元格数，取值为正整数，代表此单元格水平延伸的单元格数或跨越的列数。
    rowspan指的是当前单元格垂直方向跨越的单元格，取值为正整数，代表此单元格垂直延伸的单元格数或跨行数。例如
</p>

<table border="1">
    <tr>
        <td>1</td>
        <td rowspan="3">此单元格跨三行</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td colspan="2">此单元格跨两列</td>
    </tr>
</table>

<hr/>
<p>总结：</p>
<p>
    使用表格可以使网页上显示的信息更有条理性，在HTML5中可以使用表格来组织结构化的信息。
    另外，在HTML5中也可以使用表格来进行页面布局。一个完整的表格由一对&lt;table&gt;标签来定义。
    每个表格均有若干个单元行（由一对&lt;tr&gt;标签定义）组成，每个单元行由若干个单元格（由一对&lt;td&gt;标签定义）组成。
    表格内的具体信息放置在单元格中。单元格可以包含文本、图像、列表、段落、表单、水平线以及表格等。
</p>
<p>
    在HTML4.01中，可以使用&lt;table&gt;标签的属性设置表格的显示样式，例如border、cellpadding、cellspacing等。
    但是在HTML5中仅支持&lt;table&gt;标签的border属性，并且只允许属性值" "或"1"，" "表示表格单元周围没有边框，
    不允许用于布局目的，"1"表示在表格单元周围添加边框，允许用于布局目的。
</p>
<p>
    从结构上来看，表格可以分成表头、主体和表尾3个部分，分别使用&lt;thead&gt;&lt;tbody&gt;&lt;tfoot&gt;标签来表示。
    可以用&lt;caption&gt;定义表格的标题。一张表格只能有一个表头和表尾，但可以有多个主体。
    对于大型的表格来说，应该使&lt;tfoot&gt;出现在&lt;tbody&gt;的前面，这样浏览器在显示数据时，有利于加快表格的显示速度。
    另外在&lt;thead&gt;&lt;tbody&gt;&lt;tfoot&gt;标签内部都必须使用&lt;tr&gt;标签。
    使用&lt;thead&gt;&lt;tbody&gt;&lt;tfoot&gt;对表格进行结构划分的好处是可以先显示&lt;tbody&gt;的内容，
    而不必等整个表格下载完成后才能显示。
    无论&lt;thead&gt;&lt;tbody&gt;&lt;tfoot&gt;的顺序如何改变，&lt;thead&gt;的内容总是在表格的最前面，
    &lt;tfoot&gt;的内容总是在表格的最后面。
</p>
<p>
    表格相关的标签：<br/>
    &lt;table&gt; 表格最外层标记，代表一个表格<br/>
    &lt;tr&gt; 单元行，由若干单元格横向排列组成<br/>
    &lt;td&gt; 单元格，包含表格数据<br/>
    &lt;th&gt; 单元格标题，与td作用相似，但一般作为表头行的单元格<br/>
    &lt;thead&gt; 表头分组<br/>
    &lt;tfood&gt; 表尾分组<br/>
    &lt;tbody&gt; 表格主体分组<br/>
    &lt;colgroup&gt; 对列进行组合，以便格式化，只在table标签中有效<br/>
    &lt;caption&gt; 表格标题
</p>

<p>
    如果单元格的内容为空，可能会影响到单元格的显示。要想使空的单元格正常显示，可以为空单元格添加一个空格（&amp;nbsp;）。
</p>

</body>
</html>